<template>
  <view style="width: 100%; height: 100%">
    <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      chartData: {},
	  progress:"70%",
      opts: {
        color: ["#a743ea", "#eb9327", "#eadb36", "#0cd689"],
        fontColor: "#5555ff", // 全局默认字体颜色，16进制颜色格式
        padding: [5, 5, 5, 5],
        rotate: false, //横屏模式
        animation: true, // 是否动画展示图表
        dataLabel: false, // 是否显示图表区域内数据点上方的数据文案
		background:'#FFFFFF',
        legend: {
          show: false,
          position: "bottom", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
          float: "center", // 图例位置对齐方向，可选值：'center','left','right','top','bottom'
          padding: 5, //图例内填充边距
          margin: 5, // 图例外侧填充边距
          backgroundColor: "rgba(0,0,0,0)", // 图例背景颜色
          borderColor: "rgba(0,0,0,0)", // 图例边框颜色
          borderWidth: 0, // 图例边框线宽
          fontSize: 13, // 字体大小
          fontColor: "#c5ddf5", // 字体颜色
          lineHeight: 11, // 字体行高
          hiddenColor: "#CECECE", // 点击隐藏时图例标识及文字颜色
          itemGap: 15, // 各个分类（类别）之间的间隔
        },
		title: {
			name: "",
			fontSize: 15,
			color: "#666666",		
		},
		subtitle: {
			name: this.progress,
			fontSize: 25,
			color: "#000000"
		},
        extra: {
         ring: {
         	ringWidth:30,
         	activeOpacity: 0.5,
         	activeRadius: 10,
         	offsetAngle: 0,
         	labelWidth: 15,
         	border: false,
			//backgroundColor:transparent
         	//borderWidth: 3,
         	//borderColor: "#FFFFFF"
         },
        },
      },
    };
  },
  props: {
    pieData: {
      type: Array,
      default: () => [
        {
          name: "数量1",
          value: 23,
        },
        {
          name: "数量2",
          value: 20,
        },
        {
          name: "数量3",
          value: 29,
        },
        {
          name: "数量4",
          value: 10,
        },
      ],
    },
  },
  watch: {
    pieData: {
      handler() {
        this.setChartData();
      },
      immediate: true,
    },
  },
  methods: {
    // 设置数据 渲染图表
    setChartData() {
      this.chartData = {
        series: [
          {
            data: this.pieData,
          },
        ],
      };
    },
  },
};
</script>